// 实现这个项目的构建任务

const { src, dest, watch, series, parallel } = require('gulp');
const del = require('del');
// const cssnano = require('cssnano');

// const imagemin = require('gulp-imagemin');
// const sass = require('gulp-sass');
// const babel = require('gulp-babel');
// const swig = require('gulp-swig');

const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()

const browserSync = require('browser-sync');
const bs = browserSync.create()

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

// 打包image，font
const assets_image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

const assets_font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

// 清除目录内容
const clean = () => {
  return del(['dist', 'temp'])
}

// 处理scss
const assets_scss = () => {
  return src('src/assets/styles/**.scss', { base: 'src' })
    .pipe(plugins.sass({ outputStyle: 'expanded' }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

// 处理script
const assets_script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

// 处理html
const src_html = () => {
  return src('src/**/*.html', { base: 'src' })
    .pipe(plugins.swig({ data,  defaults: { cache: false } }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}


// 开启本地服务器
const server = () => {
  watch('src/assets/images/**', assets_image)
  watch('src/assets/fonts/**', assets_font)
  watch('src/assets/styles/**.scss', assets_scss)
  watch('src/assets/scripts/*.js', assets_script)
  watch('src/**/*.html', src_html)

  bs.init({
    notify: false,
    port: 9090,
    open: true,
    server: {
      baseDir: 'temp',
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

// 合并html文件中引入的资源路径，配合gulp-if, 混合/压缩代码， 或者进行一些其它操作
const useref = () => {
  const htmlminOpts = {
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true
  }

  return src('temp/*.html', { base: 'temp' })
    .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin(htmlminOpts)))
    .pipe(dest('temp'))
}

// const develop = series(clean, assets_image, assets_font)
// const develop = series(clean, assets_scss)
// const develop = series(clean, assets_script)

const compile = parallel(
  assets_script,
  assets_scss,
  assets_image, 
  assets_font, 
  src_html
)

const develop = series(
  clean, 
  series(compile, useref)
);

const serve = series(develop, server)

module.exports = {
  develop,
  serve,
  assets_image
}